<template>
	<view class="">
		<view class="item-con">
			<view class="item" 
			v-for="(item, index) in list" 
			:key="index" 
			>
				<view class="item-top">
					<view class="item-title">{{item.name}}</view>
					<view class="flex-row items-center justify-between">
						<view class="">
							<view class="item-d" v-if="item.lable && item.content">
								<text>{{item.lable.content}}</text>
							</view>
							<view style="padding: 10rpx 0;">
								<text class="item-price">{{item.price}}</text>
								<text class="item-u">起元/小时</text>
							</view>
						</view>
						<view class="flex-col items-center justify-center" @click.stop="openMap(item)">
							<image src="/static/img/daohang.png" mode="" class="icon"></image>
							<text class="bottom-text" style="margin-top: 10rpx;" v-if="item.distance">{{item.distance}}km</text>
						</view>
					</view>
				</view>
				<view class="item-bottom">
					<view class="">
						<text class="bottom-text" style="margin-left: 0;" v-if="item.unused">空闲{{item.unused}}/</text>
						<text class="bottom-text">共{{item.canUse}}</text>
					</view>
				</view>
			</view>
		</view>
		<model isModel="2"></model>
	</view>
</template>
<script>
	import model from "../modal/model.vue"
export default {
	components:{
		model
	},
	props:{
		list:{
			type:Array,
			default(){
				return []
			}
		}
	}
};
</script>
<style scoped lang="scss">
.item {
	// height: 325rpx;
	background: #ffffff;
	border: 1rpx solid rgba(218, 218, 218, 0.18);
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.item-top {
	padding: 30rpx 30rpx 10rpx;
}
.item-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333333;
}
.item-d {
	font-size: 20rpx;
	font-weight: 500;
	color: #a9a9a9;
}
.item-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #fe642b;
}
.p-icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.item-c {
	font-size: 22rpx;
	font-weight: 500;
	color: #666666;
}
.item-u {
	font-size: 22rpx;
	color: #333333;
	font-weight: 500;
	margin-left: 10rpx;
}
.item-bottom {
	border-radius: 0px 0px 20rpx 20rpx;
	padding: 10rpx 30rpx;
}
.btn {
	width: 89rpx;
	height: 48rpx;
	text-align: center;
	border-radius: 24px;
	line-height: 48rpx;
	font-size: 26rpx;
	font-weight: 500;
}
.one {
	background: $uni-color-bg;
	color: #000000;
}
.two {
	background: #246697;
	color: #ffffff;
}
.bottom-text {
	font-size: 26rpx;
	font-weight: 500;
	color: #333333;
	margin-left: 24rpx;
}
.icon {
	width: 58rpx;
	height: 58rpx;
}
</style>
